<template>
  <a-card
    class="box-card"
    :bordered="false"
    :body-style="{
      padding: '0px',
      overflow: 'auto',
      borderRadius: '4px',
      position: 'absolute',
      top: element.options.titleRequired ? '50px' : '0',
      bottom: '0px',
      left: '0px',
      right: '0px'
    }"
  >
    <div slot="title" class="box-card-title" v-if="element.options.titleRequired">
      <span v-text="element.options.title" />
      <div class="box-card-title-tabBar">
        <ych-icon
          v-if="element.options.refresh > 0"
          type="sync"
          :spin="loading"
          class="theme-main-hover-color panel-icon"
          @click="reFreshData()"
        />
        <router-link
          v-if="element.options.moreUrl && element.options.menuPath"
          :to="element.options.menuPath"
        >
          <ych-icon type="more" class="panel-icon" />
        </router-link>
      </div>
    </div>
    <div class="box-card-body" v-if="element.type == 'smallPage'">
      <component ref="smallPages" :is="componentFile" />
    </div>
  </a-card>
</template>

<script>
export default {
  props: ['data', 'element'],
  name: 'CardContainer',
  created() {},
  data() {
    const ComponentFile = this.render;
    return {
      componentFile: ComponentFile,
      loading: false, //刷新按钮加载效果
      timer: null, //刷新定时器
      bodyStyle: {
        //容器样式
        padding: '0px',
        overflow: 'auto',
        borderRadius: '4px',
        position: 'absolute',
        top: this.element.options.titleRequired ? '50px' : '0',
        bottom: '0px',
        left: '0px',
        right: '0px'
      }
    };
  },
  mounted() {
    let self = this;
    /*定时刷新*/
    if (this.element.options.titleRequired && this.element.options.refresh > 0) {
      let time = this.element.options.refresh * 60 * 1000;
      this.timer = setInterval(self.loadData, time);
    }
  },
  methods: {
    /*异步加载门户小页组件*/
    render() {
      let url = this.element.url;
      this.componentFile = () => ({
        component: import(`@/${url}`),
        //loading: LoadingPage,
        error: '',
        delay: 100,
        timeout: 10000
      });
    },
    reFreshData() {
      this.loadData();
    },
    /*刷新门户小页组件*/
    loadData() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      if (this.$refs.smallPages) {
        //console.log('刷新了！');
        this.$refs.smallPages.loadData();
      }
      let self = this;
      setTimeout(() => {
        self.loading = false;
      }, 300);
    }
  },
  beforeDestroy() {
    /*销毁定时器*/
    clearInterval(this.timer);
  }
};
</script>

<style lang="less" scoped>
.box-card {
  position: relative;
  ::-webkit-scrollbar-thumb {
    border-width: 12px 0px 0px 12px !important;
  }
  .box-card-body {
    height: 100%;
  }
}
</style>
